<template>
  <div class="page">
    <TopBar :title="book_info.g_name"></TopBar>
    <Row class="header">
      <Col span="8">
        <img class="img" :src="book_info.img">
      </Col>
      <Col span="16">
        <div class="title">{{ book_info.g_name }}</div>
        <div class="desc">{{ book_info.burdening }}</div>
        <div class="author">￥ {{ book_info.price }}.00 元</div><br/>
        <Row :gutter="16">
          <Col span="12">
            <el-button class="btn btn1" @click="buy">立即购买</el-button>
          </Col>
          <Col span="12">
            <el-button class="btn" @click="open_drawer = true">评论</el-button>
          </Col>
        </Row>
      </Col>
    </Row>

    <Tabs style="color: #000" value="name2">
      <TabPane label="介绍" name="name1">
        <div class="menu_item" v-for="(item,index) in aritcle_info" :key="item" @click="$goPage('/audio?id='+item.aid)">
          <!--active-->
          <div class="menu_title" :class="item.active ? 'active' : ''">{{ index + 1 }} {{ item.title }}</div>
          <div class="tag_box">
            <div class="tag" v-if="!item.is_vip">免费</div>
            <div class="tag" v-else>VIP</div>
          </div>
        </div>
      </TabPane>
      <TabPane label="评论" name="name2">
        <div class="comment" v-for="item in comm_list" :key="item">
          <Row :gutter="16">
            <Col span="3">
              <div>
                <img class="avatar" :src="item.user.host + item.user.avatar"/>
              </div>
            </Col>
            <Col span="15">
              <div>{{ item.user.username }}</div>
              <div class="date">{{ item.create_time }}</div>
            </Col>
            <Col span="6">
              <div class="like">
                <span @click="re_comm(item.coid)">回复</span>
              </div>
            </Col>

            <Row style="margin: 10px 15px;border-bottom: 1px solid #DFDFDF;width: 100%;padding-bottom: 15px">
              {{ item.context }}
            </Row>
            <Row v-for="item2 in item.re_comment" style="width: 100%" :key="item2">
              <div class="re_comm">
                <span>@{{ item2.user.username }}</span><span
                  style="margin: 0 5px;color: #666666">回复</span><span>@{{ item2.re_user.username }}</span>
                <div style="margin: 5px 0 10px; ">{{ item2.context }}</div>
                <div style="position: absolute;right: 15px;bottom: 10px;color: indianred"
                     @click="re_re_comm(item2.coid,item.coid)">回复
                </div>
              </div>
            </Row>

          </Row>
        </div>
      </TabPane>
    </Tabs>


    <Drawer title="发表评论" placement="bottom" :closable="false" v-model="open_drawer">
      <Space direction="vertical" size="large" type="flex">
        <Input v-model="comm_context" type="textarea" :rows="5" placeholder="请输入评论内容"/>
      </Space>
      <div class="btn_box">
        <Button type="error" style="rgb(215 110 110)" @click="open_drawer = false">取消发布</Button>
        <Button type="success" style="background-color: rgb(97, 191, 167)" @click="publish_comm">立即发布</Button>
      </div>
    </Drawer>

  </div>
</template>

<script>
import TopBar from "@/components/TopBar";

export default {
  name: "InfoView.vue",
  components: {
    TopBar
  },
  data() {
    return {
      id: this.$route.query.id,
      book_info: {},
      aritcle_info: [],
      open_drawer: false,
      comm_context: "",
      parent_id: 0,
      root: 0,
      comm_list: []
    }
  },
  mounted() {
    this.getData()
    this.getCommentData()
  },
  methods: {
    buy(){
      if(!localStorage.getItem('token')){
        this.$router.push('/login')
      }
    },
    getData() {
      this.$axios.get("business/goods/info/" + this.id + '/').then(res => {
        if (res.data.code == 200) {
          this.book_info = res.data.data
          this.aritcle_info = res.data.data.article
        }
      })
    },
    getCommentData() {
      this.$axios.get("/book/comment?book_id=" + this.id).then(res => {
        if (res.data.code == 200) {
          this.comm_list = res.data.data
        }
      })
    },

    publish_comm() {
      this.$axios.post("/book/comment", {
        "book_id": this.id,
        "context": this.comm_context,
        "parent_id": this.parent_id,
        "root_id": this.root_id,
      }).then(res => {
        if (res.data.code == 200) {
          this.$success(res.data.msg)
          this.open_drawer = false
          this.comm_context = ""
          this.getCommentData()
        } else {
          this.$error(res.data.msg)
        }
      })
    },
    re_comm(id) {
      this.parent_id = id;
      this.root_id = id;
      this.open_drawer = true
    },
    re_re_comm(parent_id, root_id) {
      this.parent_id = parent_id;
      this.root_id = root_id;
      this.open_drawer = true
    }
  }
}
</script>
<style>
.ivu-tabs-ink-bar {
  background-color: rgb(97, 191, 167) !important;
}

.ivu-tabs-nav .ivu-tabs-tab-active {
  color: rgb(97, 191, 167) !important;
}
</style>
<style scoped>
.page {
  background-color: rgb(242, 242, 242);
  min-height: 100vh;
}

.header {
  padding: 15px;
}

.img {
  width: 100px;
  height: 150px;
  border-radius: 10px;
}

.title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 6px;
}

.desc {
  font-size: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  height: 45px;
}

.btn {
  width: 100%;
}

.btn1, .btn1:hover {
  background-color: rgb(97, 191, 167);
  color: #FFF;
  border: none;
}

.menu_item {
  padding: 15px 10px;
  border-bottom: 1px solid #CCC;
}

.menu_title {
  color: #000;
  font-size: 16px;
  font-weight: bold;
}

.active {
  color: rgb(97, 191, 167);
}

.tag_box {
  display: flex;
  justify-content: start;
  margin-top: 10px;
}

.tag {
  border: 1px solid rgb(97, 191, 167);
  padding: 0 5px;
  border-radius: 6px;
  color: rgb(97, 191, 167);
  margin-right: 10px;
}

.comment {
  padding: 15px 20px;
  /*border-bottom: 1px solid #DDDDDD;*/
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.hot {
  background-color: #FFFFFF;
  border: 1px solid rgb(97, 191, 167);
  color: rgb(97, 191, 167);
}

.date {
  color: #BBBBBB;
}

.like {
  text-align: right;
  color: indianred;
  font-size: 18px;
}

.like span {
  font-size: 14px;
  margin-left: 6px;
  align-items: center;
}

.re_comm {
  width: 100%;
  color: #999999;
  margin-left: 10px;
  margin-top: 15px;
  border-bottom: 1px solid #DFDFDF;
  position: relative;
}

.btn_box {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
</style>